// 浏览器前缀
.c3p(@key,@value){
  -webkit-@{key}:@value;
  -moz-@{key}:@value;
  -ms-@{key}:@value;
  -o-@{key}:@value;
  @{key}:@value;
}
.appearance(@v:~'button'){.c3p(appearance,@v);}

// @import (less) 'submolle/normalize-forms.less';

.form(){
  .input-box{}
  .input-text{}
}
// textarea{}
@import (less) 'submolle/form-button.less';
@import (less) 'submolle/form-input.less';
.input-reset(){
  .c3p(box-sizing,border-box);//ie8以后对btn都支持
  display:block;
  font-size:inherit;
  width:100%;
  background:none;
  border:none;
  &.disabled,&:disabled{
    cursor: not-allowed;
  }
}
@import (less) 'submolle/form-fieldset.less';
.fieldset-reset(){
  display:block;
  margin:0;
  padding:0;
  border:none;
}
.appearlabel(@w:6em){
  position: absolute;
  top:0;bottom:0;left:0;
  width:@w;
  &+.input-box{
    margin-left:@w;
  }
}
.diyCheckUI(@type:radio,
  @rule:{
    size:0.8em;
    padding:2px;
    color:#999;
    border-radius:2px;
  }
){
  & + .@{type}{
    .c3p(box-sizing,border-box);
    position: relative;
    display: inline-block;
    width:@rule[size];height:@rule[size];
    border:1px solid @rule[color];
    .c3p(border-radius,if((@type = radio),50%,@rule[border-radius]) );
    &:before{
      content:'';
      display:block;
      position: absolute;
      top:@rule[padding];bottom:@rule[padding];
      left:@rule[padding];right:@rule[padding];
      margin:auto;
      .c3p(border-radius,if((@type = radio),50%,@rule[border-radius]) );
    }
  }
  &:checked + .@{type}{
    &:before{
      background-color:@rule[color];
    }
  }
}
// indeterminate效果时间不够暂不考虑

@import (less) 'submolle/form-testarea.less';
.textarea-reset(){
  .c3p(box-sizing,border-box);
  display:block;
  height:100%;width:100%;
  padding:0.25em 0.5em;
  border:none;
  background:none;
  outline: 0; 
}
// @import (less) 'submolle/form-select.less';
.select-reset {
  .c3p(appearance,~'none');
}


@import (less) 'submolle/ios.less';

.def(form){
  // .bt{.btn-color(auto,@bgc:color(hsl(180,50%,50%)),@ftc:color(#0f0),@brc:color(#fff));}
  // .bt2{.btn-color(auto,@bgc:color(hsl(180,50%,20%)),@ftc:color(#0f0),@brc:color(#fff));}
  // .bt3{.btn-color(auto,@bgc:color(hsl(180,20%,100%)),@ftc:color(#0f0),@brc:color(#fff));}
  // .cs{.btn-color(auto,@bgc:color(#f0f0f0),@ftc:color(#f00),@brc:color(#00f));}
  // .ds{.btn-color(@bgc:color(#f00),@ftc:color(#f00),@brc:color(#f00));}
  // .bz{
  //   .btn-size(14,20/14,0,0)
  // }

  // input[type="hidden"]{display:none;}这条其实没什么用
  input[type="text"],input[type="password"]
  // 下面是webkit独有的
  ,input[type="tel"],input[type="url"],input[type="email"],input[type="search"]{
    .c3p(box-sizing,border-box);
    .input-reset();
  }
  // 下面是webkit独有的
  // input[type="number"],input[type="range"]{}
  input[type="button"],input[type="reset"],input[type="submit"]
  // 下面是webkit独有的
  ,input[type="color"]{
    .btn-reset();
  }
  input[type="checkbox"].input-checkbox
  ,input[type="radio"].input-radio{
    display:none;
  }
  input[type="file"]{
    position: absolute;
    top:0;left:0;
    width:1px;height:1px;
    opacity: 0;
    .btn-upfile &{
      .btn-reset();
    }
  }
  // 下面是webkit有的，移动端也有类似功能效果
  input[type="time"],input[type="month"],input[type="week"]
  ,input[type="date"],input[type="datetime"],input[type="datetime-local"]{
    .input-reset();
  }
  .fieldset{
    .fieldset-reset();
  }
  
}
.def(form);


// 部分模块跳级直升3.0
// 3.0以上版本部分模块设定.def(模块名)方法用于导入时默认调用，
// 节约常规调用时间

// 目前尚未修改，从某个角度来说目前不可用

// 预计增加ios预配置

// 2020-7-29重写该模块

// 2020-7-31先分离出button,input,fieldset三个模块
// 由于未完成全部，故将内容写于模块@import下方，
// 模块文件内还有引用参考浏览器原样式部分
// 当下可能没有时间完善该模块

// ios模块是之前凑空截图ios自行编写的，html结构可以模拟推导，目前仅做备忘
// 新工作开始后可能写css的机会会少点，那就先放着，也许留到做晶舞风的项目时再捡起来看看